<template>
  <div class="home">
    <van-nav-bar title="城市选择页" left-text="饿了么" class="bg" @click-left="toPath('/index')">
      <van-icon name="manager-o" slot="right" size=".5rem" @click="toPath('/profile')" />
    </van-nav-bar>
    <!-- 当前定位城市 -->
    <div class="city_tip">
      <span>当前定位城市：</span>
      <span>定位不准时，请在城市列表中选择</span>
    </div>
    <router-link :to="'/city/'+this.guess.id">
      <div class="now_city van-hairline--top">
        <span>{{this.guess.name}}</span>
        <van-icon name="arrow" color="#A3A3A3" size=".5rem" />
      </div>
    </router-link>
    <!-- 热门城市 -->
    <div class="hot_city">
      <div class="hot_title">热门城市</div>
      <van-grid>
        <van-grid-item
          :text="item.name"
          v-for="item of hotCity"
          :key="item.id"
          @click="setCitys(item)"
        />
      </van-grid>
    </div>
    <!-- 城市选择 -->
    <van-index-bar>
      <div v-for="(key,value) of groupCity" :key="key.name">
        <van-index-anchor :index="value" />
        <van-cell
          @click="setCitys(items)"
          :title="items.name"
          v-for="items of key"
          :key="items.name"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "home",
  data() {
    return {
      hotCity: [], //热门城市数据
      groupCity: {}, //城市选择数据
      guess: {}, //定位城市
    };
  },
  methods: {
    toPath(url) {
      //点击按钮跳转页面
      this.$router.push(url);
    },
    async getCity(type) {
      const { data: res } = await this.$axios.get(`v1/cities?type=${type}`);
      if (type === "hot") {
        this.hotCity = res;
      } else if (type === "group") {
        Object.keys(res) //排序对象key属性
          .sort()
          .map((key) => {
            this.groupCity[key] = res[key];
          });
        window.localStorage.setItem("City", JSON.stringify(this.groupCity));
      } else {
        this.guess = res;
      }
    },
    setCitys(city) {
      //设置城市
      this.$router.push(`/city/${city.id}`);
    },
  },
  created() {
    const city = JSON.parse(window.localStorage.getItem("City"));
    this.getCity("hot"); //请求热门城市
    if (city) {
      //判断缓存中是否有数据
      this.groupCity = city;
    } else {
      this.getCity("group"); //所有城市
    }
    this.getCity("guess"); //所有城市
  },
};
</script>

<style lang="stylus" scoped>
@import '../../assets/css/common.styl';

.home {
  background-color: #F5F5F5;
}

.bg {
  background-color: $bg-color;
}

.van-icon, .van-nav-bar__text, .van-nav-bar__title {
  color: #fff;
}

.city_tip, .now_city, .hot_city {
  background-color: #fff;
}

.city_tip {
  padding: 0.3rem 0.2rem 0.2rem 0.2rem;
  display: flex;
  justify-content: space-between;
}

.city_tip>span:first-of-type {
  font-size: 0.4rem;
  color: #666;
}

.city_tip>span:nth-of-type(2) {
  font-size: 0.35rem;
  color: #9f9f9f;
  font-weight: 900;
}

.now_city {
  display: flex;
  padding: 0 0.2rem;
  height: 1.1rem;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;
  border-bottom: 2px solid #e4e4e4;
  margin-bottom: 0.4rem;

  span {
    font-size: 0.5rem;
    color: $font-color;
  }
}

.hot_city {
  display: flex;
  border-top: 2px solid #e4e4e4;
  font-size: 0.35rem;
  flex-direction: column;
}

.hot_title {
  padding: 0.3rem 0 0.3rem 0.2rem;
  color: #666;
}

.city_select {
  border-bottom: 2px solid #e4e4e4;
}
</style>
